/**
 * 类似QQ的卡片确认框
 */
import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableNativeFeedback,
  PixelRatio,
  Dimensions,
} from 'react-native';
import PropTypes from 'prop-types';

const MIN_WIDTH = 1 / PixelRatio.get();
const SCREEN_SIZE = Dimensions.get('window');

class CardConfirm extends Component {

  // 渲染底部按钮
  _renderBottomButtons = () => {
    // borderTopWidth: MIN_WIDTH, borderColor: '#eee',
    // 分两种情况渲染：2个按钮则是中间有一个线隔开， 有1个按钮或者3个以上的按钮则竖着排列
    const {
      bottomTitles,
      bottomFuncs,
      buttonWrapperStyle,
      buttonTextStyle,
      rippleColor,
    } = this.props;
    if (!bottomTitles.length) return null;
    if (bottomTitles.length === 2) {
      // 有2个按钮
      return (
        <View style={{ marginTop: 20, flexDirection: 'row', alignItems: 'center' }}>
          <TouchableNativeFeedback
            key={1}
            background={TouchableNativeFeedback.Ripple(rippleColor, false)}
            onPress={() => bottomFuncs[0]()}>
            <View style={[styles.buttonWrapper, buttonWrapperStyle]}>
              <Text style={[{ fontSize: 20, color: '#000' }, buttonTextStyle]}>{bottomTitles[0]}</Text>
            </View>
          </TouchableNativeFeedback>
          <TouchableNativeFeedback
            key={2}
            background={TouchableNativeFeedback.Ripple(rippleColor, false)}
            onPress={() => bottomFuncs[1]()}>
            <View style={[styles.buttonWrapper, { borderLeftWidth: MIN_WIDTH }]}>
              <Text style={[{ fontSize: 20, color: '#000' }, buttonTextStyle]}>{bottomTitles[1]}</Text>
            </View>
          </TouchableNativeFeedback>
        </View>
      );
    }
    // 有1个或者3个以上的按钮
    return (
      <View style={{ marginTop: 20 }}>
        {bottomTitles.map((val, i) => {
          return (
            <TouchableNativeFeedback
              key={i}
              background={TouchableNativeFeedback.Ripple(rippleColor, false)}
              onPress={() => bottomFuncs[i]()}>
              <View style={[styles.buttonWrapper]}>
                <Text style={[{ fontSize: 20, color: '#000' }, buttonTextStyle]}>{val}</Text>
              </View>
            </TouchableNativeFeedback>
          );
        })}
      </View>
    );
  };

  render() {
    const {
      title,
      content,
      borderColor,
      customize,
      titleStyle,

      topWrapperStyle,
      contentTextStyle,
      motherWrapperStyle,
    } = this.props;
    return (
      <View style={[styles.topWrapper, { borderColor }, topWrapperStyle]}>
        {/* 标题 */}
        {customize || (
          <View style={[{ paddingHorizontal: 25, alignItems: 'center' }, motherWrapperStyle]}>
            <Text style={[{ fontSize: 20, color: '#000', alignSelf: 'center' }, titleStyle]}>{title}</Text>
            {content.length === 0
              ? null
              : <Text style={[styles.contentTextStyle, contentTextStyle]}>{content}</Text>
            }
          </View>
        )}
        {this._renderBottomButtons()}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  topWrapper: {
    marginHorizontal: 30,
    paddingTop: 15,
    width: SCREEN_SIZE.width - 60,
    borderTopWidth: 5,
    backgroundColor: '#fff',
    elevation: 5,
  },
  buttonWrapper: {
    paddingVertical: 10,
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    borderTopWidth: MIN_WIDTH,
    borderColor: '#aaa',
  },
  contentTextStyle: {
    marginTop: 20,
    lineHeight: 25,
    fontSize: 16,
    color: '#000',
  },
});

CardConfirm.propTypes = {
  title: PropTypes.string,
  content: PropTypes.string,
  borderColor: PropTypes.string,
  customize: PropTypes.element,
  bottomTitles: PropTypes.array,
  bottomFuncs: PropTypes.array,
  rippleColor: PropTypes.string,

  topWrapperStyle: PropTypes.any,
  contentTextStyle: PropTypes.any,
  motherWrapperStyle: PropTypes.any,
  buttonWrapperStyle: PropTypes.any,
  buttonTextStyle: PropTypes.any,
  titleStyle: PropTypes.any,
};
CardConfirm.defaultProps = {
  title: '',              // 标题
  content: '',            // 内容
  borderColor: '#108eeb', // 顶部的border的颜色
  customize: null,        // 自己定制的内容
  bottomTitles: [],       // 顶部标题
  bottomFuncs: [],        // 底部标题对应的操作函数
  rippleColor: '#108eeb',

  topWrapperStyle: null,
  contentTextStyle: null,
  motherWrapperStyle: null,
  buttonWrapperStyle: null,
  buttonTextStyle: null,
  titleStyle: null,
};

export default CardConfirm;
